<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>插件管理</title>
    <style>
        .relative {
            position: relative;
            min-height: 100px;
        }
    </style>
</head>
<body>
<cms-layout layout="admin/layout/master">
    <div id="app">
        <div class="bg-white rounded-lg shadow">
            <div class="p-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold">插件设置</h2>
            </div>

            <div class="p-4">
                <div class="relative">
                    <el-table :data="installedPlugins" border v-loading="installedLoading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
                        <el-table-column label="Logo" width="80">
                            <template slot-scope="scope">
                                <el-image
                                        style="width: 40px; height: 40px"
                                        :src="scope.row.logo || '/static/images/plugin-default.png'"
                                        fit="contain">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="插件名称" width="180"></el-table-column>
                        <el-table-column prop="version" label="版本" width="100"></el-table-column>
                        <el-table-column prop="author" label="作者" width="120"></el-table-column>
                        <el-table-column prop="description" label="描述"></el-table-column>
                        <el-table-column prop="enabled" label="状态" width="100">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.enabled"
                                        @change="(val) => handleStatusChange(scope.row, val)"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <template>
                                    <el-button
                                            size="mini"
                                            type="success"
                                            @click="showConfigDialog(scope.row)">配置</el-button>

                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <!-- 配置对话框 -->
        <el-dialog title="插件配置" :visible.sync="configDialogVisible" width="600px">
            <el-form :model="configForm" label-width="100px">
                <template v-for="(value, key) in configForm">
                    <el-form-item :label="key" :key="key">
                        <el-input v-model="configForm[key]"></el-input>
                    </el-form-item>
                </template>
            </el-form>
            <div slot="footer">
                <el-button @click="configDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSaveConfig">确定</el-button>
            </div>
        </el-dialog>

    </div>
</cms-layout>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                installedPlugins: [],
                configDialogVisible: false,
                currentPlugin: null,
                configForm: {},
                installedLoading: false,
            }
        },
        created() {
            this.loadInstalledPlugins()
        },
        methods: {
            loadInstalledPlugins() {
                this.installedLoading = true
                axios.get('/admin/plugins/list').then(response => {
                    if (response.data.code === 0) {
                        this.installedPlugins = response.data.data.map(plugin => ({
                            ...plugin,
                            enabled: Boolean(plugin.enabled)
                        }))
                    }
                }).finally(() => {
                    this.installedLoading = false
                })
            },
            handleStatusChange(plugin, status) {
                this.installedLoading = true
                const action = status ? 'enable' : 'disable'
                axios.post(`/admin/plugins/${action}/${plugin.pluginId}`).then(response => {
                    if (response.data.code === 0) {
                        this.$message.success(status ? '启用成功' : '禁用成功')
                        plugin.enabled = status
                        setTimeout(function (){
                            window.location.reload()
                        },500);
                    } else {
                        plugin.enabled = !status
                        this.$message.error(response.data.msg)
                    }
                }).catch(() => {
                    plugin.enabled = !status
                    this.$message.error(status ? '启用失败' : '禁用失败')
                }).finally(() => {
                    this.installedLoading = false
                })
            },
            showConfigDialog(plugin) {
                this.currentPlugin = plugin
                this.configForm = plugin.config ? JSON.parse(plugin.config) : {}
                console.log(this.configForm)
                this.configDialogVisible = true
            },
            handleSaveConfig() {
                if (!this.currentPlugin) return
                
                this.installedLoading = true
                axios.post(`/admin/plugins/config/${this.currentPlugin.id}`, this.configForm)
                    .then(response => {
                        if (response.data.code === 0) {
                            this.$message.success('配置保存成功')
                            this.configDialogVisible = false
                            this.loadInstalledPlugins()
                        } else {
                            this.$message.error(response.data.msg)
                        }
                    }).finally(() => {
                        this.installedLoading = false
                    })
            },
        }
    })
</script>
</body>
</html> 